



<form action="" class="layui-form" method="post" style="margin: 20px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>基本信息</legend>
    </fieldset>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">优惠券名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">发放数量</label>
            <div class="layui-input-inline">
                <input type="text" name="createnum" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">适用商品</label>
        <div class="layui-input-block">
            <input type="radio" name="use_type" value="0" lay-filter="filter" title="全部" checked="" >
            <input type="radio" name="use_type" value="1" lay-filter="filter" title="指定商品">
            <input type="radio" name="use_type" value="2" lay-filter="filter" title="指定分类">
        </div>
    </div>
    <script type="text/javascript">
        layui.use(['upload', 'form', 'layedit'], function () {
            var upload = layui.upload;
            var form = layui.form;
            var layedit = layui.layedit;
            layui.code
            form.on('radio(filter)', function(data){
                console.log(data.value); //被点击的radio的value值
                var id=data.value;
                if(id==0){
                    document.getElementById('yfenlei').style.display='none';
                    document.getElementById('yshangpin').style.display='none';
                }else if(id==1){
                    document.getElementById('yfenlei').style.display='none';
                    document.getElementById('yshangpin').style.display='block';
                }else{
                    document.getElementById('yfenlei').style.display='block';
                    document.getElementById('yshangpin').style.display='none';
                }

            });
        })

    </script>
    <div class="layui-form-item" id="yfenlei" style="display: none">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-inline">
            <select name="category_id"
                    lay-search="">
                <option value=""></option>
                {volist name="category" id="c"}
                <option value="{$c.id}">{$c.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="yshangpin" style="display: none">
        <label class="layui-form-label">商品</label>
        <div class="layui-input-inline">
            <select name="goods_id"
                    lay-search="">
                <option value=""></option>
                {volist name="goods" id="g"}
                <option value="{$g.goods_id}">{$g.goods_name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">订单满</label>
            <div class="layui-input-inline">
                <input type="text" name="condition" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
            <label class="layui-form-label">折扣</label>
            <div class="layui-input-inline">
                <input type="text" name="money" autocomplete="off" placeholder="请输入百分比折扣" class="layui-input" lay-verify="required">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">领取开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input laydate-date2" name="send_start_time"  placeholder="">
            </div>
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input laydate-date3" name="send_end_time"  placeholder="">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">使用开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input laydate-date" name="use_start_time"  placeholder="">
            </div>
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input laydate-date1" name="use_end_time"  placeholder="">
            </div>
        </div>
    </div>

    <!--<div class="layui-form-item layui-form-text text">-->
    <!--<label class="layui-form-label">商品详情</label>-->
    <!--<div class="layui-input-block">-->
    <!--<textarea placeholder="请输入内容"  class="layui-textarea " id="layedit"></textarea>-->
    <!--</div>-->
    <!--</div>-->
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <button class="layui-btn" lay-submit="" lay-filter="ajax-layedit">添加</button>
    </div>
</form>
<script type="text/javascript">
    layui.use(['upload', 'form', 'layedit'], function () {
        var upload = layui.upload;
        var form = layui.form;
        var layedit = layui.layedit;
        //训练图片
        upload.render({
            elem: '#goods_img'
            , url: '{:url("common/upload")}'
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    if ($('.zzk').length != 5) {
                        x = '<a style="position: relative;display:inline-block "><i class="layui-icon zzk"></i><img class="goods_imgs" src="' + res.data.src + '" alt="">';
                        x += ' <input type="hidden" name="good_img[]" value="' + res.data.src + '"></a>';
                        $('.image-lab').append(x);
                    } else {
                        layer.msg("最多只能上传5张图片");
                    }
                } else {
                    var msg = res.msg ? res.msg : "网络错误";
                    layer.msg(msg);
                }
            }
        });

        layedit.set({
            uploadImage: {
                url: '{:url("Common/upload")}' //接口url
            }
        });
        //构建一个默认的编辑器
        var layedit_index = layedit.build('layedit', {
            tool: [
                'strong' //加粗
                , 'italic' //斜体
                , 'underline' //下划线
                , 'del' //删除线

                , '|' //分割线

                , 'left' //左对齐
                , 'center' //居中对齐
                , 'right' //右对齐
                , 'link' //超链接
                , 'unlink' //清除链接
                , 'image'//上传图片
            ]
        });

        form.on('submit(ajax-layedit)', function (data) {
            var loading = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            var url = data.form.action;
            var method = data.form.method;
            var d = data.field;
            d.content = layedit.getContent(layedit_index);
            $.ajax({
                type: method,
                url: url,
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    layer.close(loading);
                    msg = res.msg ? res.msg : '网络错误';
                    layer.msg(msg);
                    jumpUrl = res.jumpUrl;
                    if (res.code == 200) {
                        if (jumpUrl) {
                            window.location.href = jumpUrl;
                        } else {
                            window.location.reload();
                        }
                    }
                },
                error: function (res) {
                    layer.close(loading);
                    layer.msg("网络错误");
                }
            });
            return false;
        });

        // 商品分类联动
        form.on('select(category_one)', function (data) {
            var url = $(data.elem).data('url');
            $.post(url, {pid: data.value}, function (res) {
                console.log(res);
                var x = '';
                if (res.code == 200) {
                    console.log(res.data[r].name);
                    x += '<option value=""></option>';
                    for (r in res.data) {
                        x += ' <option value="' + res.data[r].id + '">' + res.data[r].name + '</option>';
                    }
                } else {
                    x += '<option value="">暂无分类</option>';
                }
                $('.category_two').html(x);
                form.render();
            })
        });
        $(document).on("click", ".zzk", function () {
            $(this).parent().remove();
        });

        $(document).on('click', '.category_img', function () {

        });
        //图片
        upload.render({
            elem: '.category_img'
            , url: '{:url("common/upload")}'
            , done: function (res, index, upload) {
                console.log($(this.item).parent().children('img'));
                if (res.code == 0) {
                    $(this.item).parent().children('.category_image').attr('src', res.data.src);
                    $(this.item).parent().children('input').attr('value', res.data.src);
                } else {
                    var msg = res.msg ? res.msg : "网络错误";
                    layer.msg(msg);
                }
            }
        });
        var number = 2;
        $(document).on("click", ".addCategoty", function () {
            var s = '<div class="layui-form-item">\n' +
                '            <div class="layui-inline">\n' +
                '                <label class="layui-form-label">规格</label>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <input type="text" name="key_name[' + number + ']" lay-verify="required" autocomplete="off" class=" layui-input">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '           <div class="layui-inline">\n' +
                '                <label class="layui-form-label">商品价格</label>\n' +
                '                <div class="layui-input-inline">\n' +
                '                   <input type="number" step="0.01" name="price[' + number + ']" maxlength="8" autocomplete="off" class="layui-input " lay-verify="required">\n' +
                '                </div>\n' +
                '                <div class="layui-form-mid layui-word-aux">元</div>\n' +
                '            </div>'+
                '            <div class="layui-inline">\n' +
                '                <label class="layui-form-label">库存</label>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <input type="number" step="1" name="store_count[' + number + ']" maxlength="8" lay-verify="required" autocomplete="off" class=" layui-input">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-inline">\n' +
                '                <label class="layui-form-label">规格图片</label>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <button type="button" class="layui-btn layui-btn-primary category_img'+number+'">\n' +
                '                        <i class="layui-icon"></i> 上传图片\n' +
                '                    </button>\n' +
                '                    <img src="" alt="" class="category_image zoom-img">\n' +
                '                    <input type="hidden" name="spec_img[' + number + ']">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-inline">\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-danger deleteCategoty" type="button">\n' +
                '                        -' +
                '                    </button>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </div>';

            $('.category').append(s);
            //训练图片
            upload.render({
                elem: '.category_img'+number
                , url: '{:url("common/upload")}'
                , done: function (res, index, upload) {
                    console.log($(this.item).parent().children('img'));
                    if (res.code == 0) {
                        $(this.item).parent().children('.category_image').attr('src', res.data.src);
                        $(this.item).parent().children('input').attr('value', res.data.src);
                    } else {
                        var msg = res.msg ? res.msg : "网络错误";
                        layer.msg(msg);
                    }
                }
            });
            number++;
            form.render();
        });
        // 移除
        $(document).on('click', '.deleteCategoty', function () {
            $(this).parents('.layui-form-item').remove()
        })
    })
</script>
